blob: a3c97cb8ce85609d04bf769b8b81a21649549c9e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<script lang="ts" context="module">
import { ApiClient } from "$lib/api_client";
import type { Match } from "$lib/api_types";
const PAGE_SIZE = "50";
export async function load({ params, fetch }) {
try {
const apiClient = new ApiClient(fetch);
const botName = params["bot_name"];
let { matches, has_next } = await apiClient.get("/api/matches", { bot: botName });
// TODO: should this be done client-side?
// if (query["after"]) {
// matches = matches.reverse();
// }
return {
props: {
matches,
botName,
hasNext: has_next,
},
};
} catch (error) {
return {
status: error.status,
error: new Error("failed to load matches"),
};
}
}
</script>
<script lang="ts">
import LinkButton from "$lib/components/LinkButton.svelte";
import BotMatchList from "$lib/components/matches/BotMatchList.svelte";
import { apiMatchtoBotMatch } from "$lib/matches";
export let matches: Match[];
export let botName: string | null;
// whether a next page exists in the current iteration direction (before/after)
// export let hasNext: boolean;
$: botMatches = matches.map((match) => apiMatchtoBotMatch(botName, match));
</script>
<div class="container">
<BotMatchList {botMatches} />
</div>
<style lang="scss">
.container {
max-width: 800px;
margin: 0 auto;
width: 100%;
}
.page-controls {
display: flex;
justify-content: center;
margin: 24px 0;
}
</style>
|
